<div class="panel panel-default panel-intro">
    <div class="panel-heading">
        <div class="panel-lead"><em>栏目管理（Column Management）</em>用于管理前台栏目菜单数据，启用英文后切换English管理英文数据</div>
        {if $switch_lang == '1'}
        <ul class="nav nav-tabs" data-field="lang">
            {foreach name="langList" item="vo" key="key"}
            <li{if $currentLang == (string)$key} class="active"{/if}>
            <a href="javascript:;" data-value="{$key}" data-toggle="tab" onclick="updateBoxStyle('{$key}')">{$vo}</a>
            </li>
            {/foreach}
        </ul>
        {/if}
    </div>
    <div {if $switch_lang == '1'}class="box" id="SwitchColors"{/if}>
    <div class="panel-body">
        <div id="myTabContent" class="tab-content">
            <div class="tab-pane fade active in" id="one">
                <div class="widget-body no-padding">
                    <div id="toolbar" class="toolbar">
                        <a href="javascript:;" class="btn btn-primary btn-refresh" title="{:__('Refresh')}" ><i class="fa fa-refresh"></i> </a>
                        <a href="javascript:;" class="btn btn-success btn-add {:$auth->check('wwh/column/add')?'':'hide'}" title="{:__('Add')}" ><i class="fa fa-plus"></i> {:__('Add')}</a>
                        <a href="javascript:;" class="btn btn-success btn-edit btn-disabled disabled {:$auth->check('wwh/column/edit')?'':'hide'}" title="{:__('Edit')}" ><i class="fa fa-pencil"></i> {:__('Edit')}</a>
                        <a href="javascript:;" class="btn btn-danger btn-del btn-disabled disabled {:$auth->check('wwh/column/del')?'':'hide'}" title="{:__('Delete')}" ><i class="fa fa-trash"></i> {:__('Delete')}</a>

                        <div class="dropdown btn-group {:$auth->check('wwh/column/multi')?'':'hide'}">
                            <a class="btn btn-primary btn-more dropdown-toggle btn-disabled disabled" data-toggle="dropdown"><i class="fa fa-cog"></i> {:__('More')}</a>
                            <ul class="dropdown-menu text-left" role="menu">
                                <li><a class="btn btn-link btn-multi btn-disabled disabled" href="javascript:;" data-params="status=normal"><i class="fa fa-eye"></i> {:__('Set to normal')}</a></li>
                                <li><a class="btn btn-link btn-multi btn-disabled disabled" href="javascript:;" data-params="status=hidden"><i class="fa fa-eye-slash"></i> {:__('Set to hidden')}</a></li>
                            </ul>
                        </div>
                        {if $auth->check('wwh/template/index')}
                        <a class="btn btn-info btn-dialog" href="{:url('wwh/template/index')}" data-area='["80%","80%"]' title="{:__('栏目模板')}"><i class="fa fa-camera"></i> {:__('栏目模板')}</a>
                        {/if}

                    </div>
                    <table id="table" class="table table-striped table-bordered table-hover table-nowrap"
                           data-operate-edit="{:$auth->check('wwh/column/edit')}"
                           data-operate-del="{:$auth->check('wwh/column/del')}"
                           width="100%">
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    // 直接定义全局函数
    function updateBoxStyle(langId) {
        // 样式映射
        const styleMap = {
            '1': 'box-success',
            '2': 'box-warning'
        };

        // 清除旧样式
        document.getElementById('SwitchColors').classList.remove('box-success', 'box-warning');

        // 添加新样式
        document.getElementById('SwitchColors').classList.add(styleMap[langId] || 'box-success');

        console.log('当前语言:', langId, '应用样式:', styleMap[langId]);
    }

    // 初始化执行
    document.addEventListener('DOMContentLoaded', function() {
        // 获取当前激活的Tab
        const activeTab = document.querySelector('#lang-tabs li.active a');
        if (activeTab) {
            updateBoxStyle(activeTab.dataset.lang);
        }
    });
</script>
